<template>
  <div>
    <h2>myfrom组件</h2>
    <el-form label-width="80px" label-position="right" style="width: 40%" 
    :model="formData" :rules="formDataRules" ref="formDataRef">
      <el-form-item label="用户名" prop="username">
        <el-input placeholder="请输入用户名" v-model="formData.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请输入密码" v-model="formData.password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="repassword">
        <el-input placeholder="再次输入密码" v-model="formData.repassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="doClick">提交</el-button>
        <el-button plain type="primary" @click="doReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "myfrom",
  data() {
    return {
      formData:{
        username:'',
        password:'',
        repassword:'',
      },
      formDataRules:{
        username:[
          { required:true,message:'请输入用户名',trigger:'blur'}
        ],
        password:[
          { required:true,message:'请输入密码',trigger:'blur'}
        ],
        repassword:[
          { required:true,message:'请输入确认密码',trigger:'blur'},
           {pattern:/^\w{6,15}$/,message:'密码必须是6-15位的字母与数字',trigger:'blur'},
           {
             validator: (rule,value,callback) => {
               if(value === this.formData.password){
                 callback()//成功
               }else if( value === '123456'){
                 callback( new Error('密码不能是123456'))
               }else{
                 callback( new Error('两次密码输入不一致'))
               }
             },
             trigger:"blur"
           }
        ],
      }
      
    };
  },

  methods:{
    doClick(){
      this.$refs.formDataRef.validate(valid=>{
        console.log(valid)
        if(valid){
          console.log('校验成功');
        }
      })
    },

    doReset(){
      //(1)情况红色提示  (2)恢复表单到默认内容
      this.$refs.formDataRef.resetFields()
    }
  }
};
</script>

<style>
</style>